import React from "react";
import { Button, Divider, Timeline, Tooltip, message } from "antd";
interface IProps {
  txt: string;
  id: number;
  needDivder: boolean;
  divderTxt?: string;
}
const MdEasyCom = (prop: any): React.ReactElement => {
  const okto = () => {
    message.success('get 到这一点了吧。', 1);
  };
  return (
    <div>

      {prop.arr.map((el: IProps) => {
        return (
          <Timeline key={el.id}>
            <Timeline.Item>
              <h1 style={{ margin: "0" }}>
                {el.txt}
                <Tooltip title="点击一下">
                  <Button onClick={okto} style={{ marginLeft: "10px" }}>
                    了解
                  </Button>
                </Tooltip>
              </h1>
              {el.needDivder ? (
                <Divider orientation="left">{el.divderTxt}</Divider>
              ) : null}
            </Timeline.Item>

          </Timeline>

        );
      })}
    </div>
  );
};
export default MdEasyCom;
